<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Team</title>
    <link href="https://www.bootcss.com/p/buttons/css/buttons.css" rel="stylesheet" type="text/css"/>
    <link href="static/css/bar.css" rel="stylesheet" type="text/css"/>
    <link href="static/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
    <link href="static/css/loading.css" rel="stylesheet" type="text/css"/>
    <link href="static/css/home-style.css" rel="stylesheet" type="text/css"/>
    <link href="static/css/members.css" rel="stylesheet" type="text/css"/>
    <link href="static/css/card_component.css" rel="stylesheet" type="text/css"/>
    <link href="static/css/footer.css" rel="stylesheet"/>
    <script src="static/js/jquery.js"></script>
    <script src="static/js/scroll.js"></script>
    <script src='static/js/gsap.min.js'></script>
    <script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-db44b196776521ea816683afab021f757616c80860d31da6232dedb8d7cc4862.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/bas.js'></script>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/OrbitControls-2.js'></script>
    <script src="static/js/lizi.js" type="text/javascript"></script>
    <script src="static/js/teacher_card.js" type="text/javascript"></script>
    <script>
        window.onload = function () {
            $("nav").hide();

            $(".team-container").hide();
            init();
            scrollM(0, 0);
        }

        document.onreadystatechange = function () {
            if (document.readyState == "complete") {
                setTimeout(function () {

                    $("#loading-cover").slideUp(700);

                    document.getElementById("body-content").style.visibility = "visible";
                    $(".all-body").css({"overflow": "scroll"});
                    $("nav").show();
                    $(".team-container").show();

                }, 2400)
            }
        }
    </script>
</head>

<body class="all-body" style="overflow: hidden">
<!-- loading begin-->

<div id="loading-cover">

    <div class="hex-border">
        <div class="hexagons">
            <div class="hexagon"></div>
            <div class="hexagon"></div>
            <div class="hexagon"></div>
            <div class="hexagon"></div>
            <div class="hexagon"></div>
            <div class="hexagon"></div>
            <div class="hexagon"></div>
        </div>
    </div>
</div>
<!-- loading end -->
<!--navigator begin-->
<nav>
    <div class="nav-wrapper">
        <ul id="topbar">
            <li class="main-menu"><a href="index.html"> <img alt="logo" src="static/img/logo1.png"/> </a></li>
            <li class="main-menu">
                <a class="main-menu-btn" href="#" style="margin-left: -30px">PROJECT <i class="fa fa-caret-down"
                                                                                        style="font-size:24px"></i></a>
                <ol class="submenu" style="margin-left: -30px">
                    <li><a href="#">Description</a></li>
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Parts</a></li>
                    <li><a href="#">Improvement</a></li>
                </ol>
            </li>
            <li class="main-menu"><a class="main-menu-btn" href="#">RESULTS<i class="fa fa-caret-down"
                                                                              style="font-size:24px"></i></a>
                <ol class="submenu">
                    <li><a href="#">Demonstrate</a></li>
                    <li><a href="#">Contribution</a></li>
                    <li><a href="#">Engineering<br/>Success</a></li>
                    <li><a href="#">Proposed<br/>Implementaion</a></li>

                </ol>
            </li>
            <li class="main-menu"><a class="main-menu-btn" href="#">WET LAB<i class="fa fa-caret-down"
                                                                              style="font-size:24px"></i></a>
                <ol class="submenu">
                    <li><a href="#">Measurement</a></li>
                    <li><a href="#">Notebook</a></li>
                    <li><a href="#">Safety</a></li>
                    <li><a href="#">Methods</a></li>

                </ol>
            </li>
            <li class="main-menu"><a class="main-menu-btn" href="#">DRY LAB<i class="fa fa-caret-down"
                                                                              style="font-size:24px"></i></a>
                <ol class="submenu">
                    <li><a href="#">Modeling</a></li>

                </ol>
            </li>
            <li class="main-menu"><a class="main-menu-btn" href="#">Team<i class="fa fa-caret-down"
                                                                           style="font-size:24px"></i></a>
                <ol class="submenu">
                    <li><a href="team_members.html">Members</a></li>
                    <li><a href="#">Attributions</a></li>
                    <li><a href="#">Collabrations</a></li>
                    <li><a href="#">Sponsors</a></li>

                </ol>
            </li>
            <li class="main-menu"><a class="main-menu-btn" href="#" style="font-size: 13px;vertical-align: middle">HUMAN<br/>PRACTICES<i
                    class="fa fa-caret-down" style="font-size:20px"></i></a>
                <ol class="submenu">
                    <li><a href="#">Integrated HP</a></li>
                    <li><a href="#">Collaboration</a></li>
                    <li><a href="#">Partnership</a></li>
                    <li><a href="#">Education&<br/>Engagement</a></li>

                </ol>
            </li>
            <li class="main-menu"><a class="main-menu-btn" href="#">Judging Form</a></li>

        </ul>
    </div>
</nav>

<div id="body-content" style="visibility: hidden">
    <div id="three-container">
    </div>
    <div class="members-container"
    ">
    <h1 class="member-title">members</h1>
    <div class="card" style="background: #7F7FD5;  /* fallback for old browsers */
                                    background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);  /* Chrome 10-25, Safari 5.1-6 */
                                    background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
                                    ">
        <div class="imgBx">
            <img src="static/img/members/2.jpg"/>
        </div>
        <div class="content">
            <h2>Yi Fu</h2>
            <p>
                She is an active ,imaginative, and creative girl, she likes travelling around and make friends with guys
                who have interesting soul. She enjoys both solitary and jollification, which indicates that she is
                slightly mad ,maybe.(She is fond of biology，and she wanna find a lifelong project to fight with.
            </p>
        </div>

    </div>
    <div class="card" style="background: #8360c3;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2ebf91, #8360c3);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2ebf91, #8360c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
">
        <div class="imgBx">
            <img src="static/img/members/2.jpg"/>
        </div>
        <div class="content">
            <h2>
                Haina Lan</h2>
            <p>
                I am Guangqi Shan. I am a sophomore in bioengineering.My hobby is to meet up with friends, watch movies
                and exercise.Participating in igem is about getting knowledge and a real lab experience, working with
                positive people. Enjoy the whole process and make my own contribution.
            </p>
        </div>

    </div>
    <div class="card">
        <div class="imgBx">
            <img src="static/img/members/2.jpg"/>
        </div>
        <div class="content">
            <h2>Guangqi Shan</h2>
            <p>
                She is an active ,imaginative, and creative girl, she likes travelling around and make friends with guys
                who have interesting soul. She enjoys both solitary and jollification, which indicates that she is
                slightly mad ,maybe.(She is fond of biology，and she wanna find a lifelong project to fight with.
            </p>
        </div>

    </div>
    <div class="card">
        <div class="imgBx">
            <img src="static/img/members/2.jpg"/>
        </div>
        <div class="content">
            <h2>Guangqi Shan</h2>
            <p>
                She is an active ,imaginative, and creative girl, she likes travelling around and make friends with guys
                who have interesting soul. She enjoys both solitary and jollification, which indicates that she is
                slightly mad ,maybe.(She is fond of biology，and she wanna find a lifelong project to fight with.
            </p>
        </div>

    </div>
    <div class="card">
        <div class="imgBx">
            <img src="static/img/members/2.jpg"/>
        </div>
        <div class="content">
            <h2>Yi Fu</h2>
            <p>
                She is an active ,imaginative, and creative girl, she likes travelling around and make friends with guys
                who have interesting soul. She enjoys both solitary and jollification, which indicates that she is
                slightly mad ,maybe.(She is fond of biology，and she wanna find a lifelong project to fight with.
            </p>
        </div>

    </div>
    <div class="card">
        <div class="imgBx">
            <img src="static/img/members/2.jpg"/>
        </div>
        <div class="content">
            <h2>
                Haina Lan</h2>
            <p>
                I am Guangqi Shan. I am a sophomore in bioengineering.My hobby is to meet up with friends, watch movies
                and exercise.Participating in igem is about getting knowledge and a real lab experience, working with
                positive people. Enjoy the whole process and make my own contribution.
            </p>
        </div>

    </div>
    <div class="card">
        <div class="imgBx">
            <img src="static/img/members/2.jpg"/>
        </div>
        <div class="content">
            <h2>Guangqi Shan</h2>
            <p>
                She is an active ,imaginative, and creative girl, she likes travelling around and make friends with guys
                who have interesting soul. She enjoys both solitary and jollification, which indicates that she is
                slightly mad ,maybe.(She is fond of biology，and she wanna find a lifelong project to fight with.
            </p>
        </div>

    </div>
    <div class="card">
        <div class="imgBx">
            <img src="static/img/members/2.jpg"/>
        </div>
        <div class="content">
            <h2>Guangqi Shan</h2>
            <p>
                She is an active ,imaginative, and creative girl, she likes travelling around and make friends with guys
                who have interesting soul. She enjoys both solitary and jollification, which indicates that she is
                slightly mad ,maybe.(She is fond of biology，and she wanna find a lifelong project to fight with.
            </p>
        </div>

    </div>
    <div class="card">
        <div class="imgBx">
            <img src="static/img/members/2.jpg"/>
        </div>
        <div class="content">
            <h2>Yi Fu</h2>
            <p>
                She is an active ,imaginative, and creative girl, she likes travelling around and make friends with guys
                who have interesting soul. She enjoys both solitary and jollification, which indicates that she is
                slightly mad ,maybe.(She is fond of biology，and she wanna find a lifelong project to fight with.
            </p>
        </div>

    </div>
    <div class="card">
        <div class="imgBx">
            <img src="static/img/members/2.jpg"/>
        </div>
        <div class="content">
            <h2>
                Haina Lan</h2>
            <p>
                I am Guangqi Shan. I am a sophomore in bioengineering.My hobby is to meet up with friends, watch movies
                and exercise.Participating in igem is about getting knowledge and a real lab experience, working with
                positive people. Enjoy the whole process and make my own contribution.
            </p>
        </div>

    </div>
    <div class="card">
        <div class="imgBx">
            <img src="static/img/members/2.jpg"/>
        </div>
        <div class="content">
            <h2>Guangqi Shan</h2>
            <p>
                She is an active ,imaginative, and creative girl, she likes travelling around and make friends with guys
                who have interesting soul. She enjoys both solitary and jollification, which indicates that she is
                slightly mad ,maybe.(She is fond of biology，and she wanna find a lifelong project to fight with.
            </p>
        </div>

    </div>
    <div class="card">
        <div class="imgBx">
            <img src="static/img/members/2.jpg"/>
        </div>
        <div class="content">
            <h2>Guangqi Shan</h2>
            <p>
                She is an active ,imaginative, and creative girl, she likes travelling around and make friends with guys
                who have interesting soul. She enjoys both solitary and jollification, which indicates that she is
                slightly mad ,maybe.(She is fond of biology，and she wanna find a lifelong project to fight with.
            </p>
        </div>

    </div>
    <div class="card">
        <div class="imgBx">
            <img src="static/img/members/2.jpg"/>
        </div>
        <div class="content">
            <h2>Yi Fu</h2>
            <p>
                She is an active ,imaginative, and creative girl, she likes travelling around and make friends with guys
                who have interesting soul. She enjoys both solitary and jollification, which indicates that she is
                slightly mad ,maybe.(She is fond of biology，and she wanna find a lifelong project to fight with.
            </p>
        </div>

    </div>
    <div class="card">
        <div class="imgBx">
            <img src="static/img/members/2.jpg"/>
        </div>
        <div class="content">
            <h2>
                Haina Lan</h2>
            <p>
                I am Guangqi Shan. I am a sophomore in bioengineering.My hobby is to meet up with friends, watch movies
                and exercise.Participating in igem is about getting knowledge and a real lab experience, working with
                positive people. Enjoy the whole process and make my own contribution.
            </p>
        </div>

    </div>
    <div class="card">
        <div class="imgBx">
            <img src="static/img/members/2.jpg"/>
        </div>
        <div class="content">
            <h2>Guangqi Shan</h2>
            <p>
                She is an active ,imaginative, and creative girl, she likes travelling around and make friends with guys
                who have interesting soul. She enjoys both solitary and jollification, which indicates that she is
                slightly mad ,maybe.(She is fond of biology，and she wanna find a lifelong project to fight with.
            </p>
        </div>

    </div>
    <div class="card">
        <div class="imgBx">
            <img src="static/img/members/2.jpg"/>
        </div>
        <div class="content">
            <h2>Guangqi Shan</h2>
            <p>
                She is an active ,imaginative, and creative girl, she likes travelling around and make friends with guys
                who have interesting soul. She enjoys both solitary and jollification, which indicates that she is
                slightly mad ,maybe.(She is fond of biology，and she wanna find a lifelong project to fight with.
            </p>
        </div>

    </div>
    <h1 class="member-title instructors">INSTRUCTORS</h1>
    <div class="t-card-wrapper">
        <ul class="stage clearfix">

            <li class="scene">
                <div class="movie" onclick="return true">
                    <div class="poster"></div>
                    <div class="info">
                        <header>
                            <h1>KAILI NIE</h1>
                            <span class="year">Associate Professor of the College of LifeSciences and Technology, BUCT.</span>

                        </header>
                        <p>
                            He got his PhD at Beijing University of Chemical Technology in 2009, supervised by Prof.
                            Tianwei Tan. After that, he started his postdoctoral fellow with Professor Shijie Liu at
                            SUNY-ESF, and investigated on the cellulase utilization. Now, He is focusing on enzymatic
                            modification, synthetic biology, bio-energy, and bio-refinery for high value-added
                            chemicals.</p>
                    </div>
                </div>
            </li>

            <li class="scene">
                <div class="movie" onclick="return true">
                    <div class="poster"></div>
                    <div class="info">
                        <header>
                            <h1>LUO LIU</h1>
                            <span class="year">Associate Professor of the College of Life Sciences and Technology, BUCT.</span>

                        </header>
                        <p>
                            He studied technical biology at Institute for Technical Biochemistry, University of
                            Stuttgart, supervised by Prof. Rolf Schmid, and received PhD in 2007. After that, he
                            completed a drug biosynthesis project for PharmaZell GmbH in Germany, from “proof of
                            concept” to pilot plant. He is focusing on synthetic biology, multi enzyme cascade reaction,
                            and biorefinery for producing bio-based chemicals including bioenergy.</p>
                    </div>
                </div>
            </li>

            <li class="scene">
                <div class="movie" onclick="return true">
                    <div class="poster"></div>
                    <div class="info">
                        <header>
                            <h1>The Gold Rush</h1>
                            <span class="year">1925</span>
                            <span class="rating">NR</span>
                            <span class="duration">95 minutes</span>
                        </header>
                        <p>
                            The Tramp travels to the Yukon to take part in the Klondike Gold Rush. He gets mixed up with
                            some burly characters and falls in love with the beautiful Georgia. He tries to win her
                            heart with his singular charm.
                        </p>
                    </div>
                </div>
            </li>

        </ul>
    </div><!-- /wrapper -->
</div>


</div>
<button class="button button-glow button-circle button-action button-jumbo" id="topButton" onclick="scrollControl(0)"><i
        class="fa fa-angle-up"></i></button>

<!--脚注-->
<footer>
    <div class="container">
        <div class="box">
            <a class="img" href="#">
                <img alt="igem_logo" src="static/img/igem2.png"/>

            </a>
            <p>IGEM</p>
        </div>
        <div class="box">
            <a class="img" href="#">
                <img alt="team_logo" src="static/img/logo1.png"/>

            </a>
            <p>TEAM</p>
        </div>
        <div class="box">
            <a class="img" href="#">
                <img alt="buct_logo" src="static/img/buct-logo2.png"/>

            </a>
            <p>BUCT</p>
        </div>
        <div class="box" style="margin-left: -30px">
            <a class="img" href="#">
                <img alt="zhihu_logo" src="static/img/zhihu.png"/>

            </a>
            <p>ZhiHu</p>
        </div>
    </div>
    <p class="copyright">Copyright © 2020 BUCT All rights reserved.</p>
</footer>
<!--脚注结束-->
</body>
</html>